<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0065)http://www.matthewflickinger.com/lab/whatsinagif/gif_explorer.asp -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>3MF Project: What's In A GIF - Bit by Byte</title>
	<style type="text/css">
	body {box-sizing: border-box;}
	.byte {font-family: Courier, fixed;
		padding: .2em}
	.gif_header {background-color: #f9E89D}
	.gif_screen {background-color: #C8DBD9}
	.gif_color {background-color: #E1E1E1}
	.gif_graphic {background-color: #F9EB9D}
	.gif_imgdesc {background-color: #C2D1DC}
	.gif_imgdata {background-color: #D0C4C4}
	.gif_trailer {background-color: #f9E89D}
	.gif_ext {background-color: #D0CFAE}
	#global_color_size {margin-left: auto; margin-right:auto; border:1px solid black;}
	#global_color_size td {text-align:center;}
	.choose-input {
    	display: grid;
		grid-template-columns: 300px 1fr;
	}
	.choose-input .label {
		font-weight: bold;
    	grid-column: 1 / 2;
	}
	.choose-input .input {
    	grid-column: 2 / 3;
		vertical-align: middle;
	}
	.choose-input .sample-images {
		display: flex;
		align-items: center;
	}
	.choose-input .sample-images a:hover {
		background-color: #D0C4C4;
		border: 1px solid #999;
	}
	.choose-input .sample-images a img {
		padding: 10px;
	}
	.choose-input .sample-images a:hover img {
		margin: -1px;
	}
	#gif_view {
		max-width: 800px;
		margin: 0 auto;
	}
	#gif_view canvas {
		display: block;
		margin: 0 auto;
	}
	.gif_section {
		margin: 1em 0;
	}
	.block_header {
		display: grid;
		grid-template-columns: 3fr 1fr 1fr;
		text-align: left;
		font-size: 1.5em;
	}
	.block_header .value:first-child .label {
		display: none;
	}
	.block_header .value:first-child {
		font-weight: bold;
		padding: 10px;
		font-size: 1.25em;
	}
	.block_header .value .label {
		font-size: .5em;
	}
	.block_header .value:not(:first-child) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	dl {
		display: flex;
		flex-flow: row wrap;
		border: 1px #333;
		border-style: solid none;
	}
	dt {
		flex-basis: 31%;
		padding: 2px 4px;
		text-align: right;
		font-weight: bold;
	}
	dd {
		flex-basis: 15%;
		padding: 2px 4px;
		flex-grow: 1;
		margin: 0;
		margin-inline-start: 0;
		text-align: left;
	}
	canvas.image_frame {
		max-width: 100%
	}
	.byte_view table {
		width: 100%;
		text-align: center;
		cursor: default;
	}
	.byte_view table td.hover {
		background: #FFFFFFaa;
	}
	.code_view table {
		width: 100%;
		text-align: center;
		cursor: default;
	}
	.code_view table td.hover {
		background: #FFFFFFaa;
	}
	table td.offset {
		color: #999999;
	}
	.tooltip {
		padding: 3px;
		background-color: #ffffff;
		background-color: #ffffffee;
		display: none;
        position: absolute;
		border: 1px solid #666;
	}
	table.code_table {
		width: 100%;
	}
	table.code_table th {
		text-align: left;
	}
	table.code_table .col_code{
		width: 3.5em;
	}
	#gif_view .nav {
		display: flex;
	}
	#gif_view .nav>*:nth-child(1) {
		flex-grow: 1;
	}
	#gif_view .nav>* {
		margin: 5px;
	}
	.block-body {
		margin-left: 20px;
	}
	.expander .header {
		padding: 2px 0;
		text-align: center;
	}
	.expander .collapsed { 
		display: none;
	}
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0,0.4);
	}

	.modal-content {
		background-color: #fefefe;
		margin: 15% auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
	}

	.modal .close-icon {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}

	.modal .close-icon:hover,
	.modal .close-icon:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}
	</style>
	<link rel="stylesheet" href="./What&#39;s In A GIF - GIF Explorer_files/proj.css">
	
</head>
<body>

<div id="nav"><a href="http://www.matthewflickinger.com/lab/index.html">back to main lab page</a></div>
<div id="body">


<h1>Project: <span class="projname">What's In A GIF - GIF Explorer</span></h1>
<nav><a href="http://www.matthewflickinger.com/lab/whatsinagif/animation_and_transparency.asp" class="prev">Prev</a> - <a class="index" href="http://www.matthewflickinger.com/lab/whatsinagif/">Index</a> - <a class="next" href="http://www.matthewflickinger.com/lab/whatsinagif/">Next</a></nav>
<p>
	This page will allow you to explore the different parts
	of an existing GIF file. You will be able to explore the 
	different blocks and can view both the decoded content 
	as well as the raw bytes for each section.
</p>
<p>
	This particular decoder was written in pure, vanilla javascript.
	All decoding happens locally within your browser. This means
	you will need a relatively modern browser to run this code.
</p>

<div class="choose-input">
	<div class="label">Choose File From Your Computer</div>
	<div class="input"><input type="file" id="files" name="files"></div>
	<div class="label">Or Choose A Sample Image...</div>
	<div class="input"><div class="sample-images">
		<a class="choose-img" href="http://www.matthewflickinger.com/lab/whatsinagif/gif_explorer.asp#"><img src="./What&#39;s In A GIF - GIF Explorer_files/sample_1.gif"></a>
		<a class="choose-img" href="http://www.matthewflickinger.com/lab/whatsinagif/gif_explorer.asp#"><img src="./What&#39;s In A GIF - GIF Explorer_files/sample_2_animation.gif"></a>
		<a class="choose-img" href="http://www.matthewflickinger.com/lab/whatsinagif/gif_explorer.asp#"><img src="./What&#39;s In A GIF - GIF Explorer_files/Dancing.gif" width="100/"></a>
	</div></div>
</div>

<div id="gif_view"></div>

<template id="gif_view_template"></template>
<template id="byte_view_template"></template>
<template id="image_frame_template"></template>
<template id="color_table_template"></template>
<template id="code_unit_template"></template>
<template id="code_view_template"></template>
<template id="code_table_template"></template>
<template id="expander"></template>
<template id="modal"></template>
<div style="text-align:center; margin-top: 10px; padding-top: 10px; border-top: #cecece 1px solid">
    <a href="http://www.matthewflickinger.com/index.html">home</a> -
    <a href="https://github.com/MrFlick/whats-in-a-gif">github</a> -
    <a href="mailto:me@matthewflickinger.com">me@matthewflickinger.com</a>
 </div>
<script src="./What&#39;s In A GIF - GIF Explorer_files/gif_explorer_client.js.download"></script>
</div>    

    
</body></html>